<template>
	<view class="content">
		<view style="width: 100%;">
			
	
		<view class="top-content">
			<view class="wenzi " :class="!item.one&&!item.tow?'slect-type':''">填写信息</view>
			<view class="wenzi" :class="item.one&&!item.tow?'slect-type':''" >提交信息</view>
			<view class="wenzi" :class="item.tow?'slect-type':''">审核通过</view>
			
		</view>
		<view class="dian-line">
			<view class="dian-content" >
	
				<view class="dian-have flex-content"  v-if="!item.one&&!item.tow">
					<u-icon name="checkbox-mark" size="15" color="#fff"></u-icon>
				</view>
				<view class="dian-no" :class="item.one||item.tow?'slect-icon':''" v-else  >
					
				</view>
			</view>
			<u-line v-if="item.one||item.tow" color="#C60300"/>
			<u-line v-else color="#BBBABA"/>
			<view class="dian-content">
				<view class="dian-have flex-content" v-if="one">
					<u-icon name="checkbox-mark" size="15" color="#fff"></u-icon>
				</view>
				<view class="dian-no" :class="item.one||item.tow?'slect-icon':''" v-else >
					
				</view>
				
			</view>
			<u-line v-if="item.tow" color="#C60300"/>
			<u-line v-else color="#BBBABA"/>
			<view class="dian-content">
				<view class="dian-have flex-content"  v-if="item.tow">
					<u-icon name="checkbox-mark" size="15" color="#fff"></u-icon>
				</view>
				<view class="dian-no" v-else >
					
				</view>
				
			</view>
		</view>
			</view>
	</view>
</template>

<script>
	export default {
		name:"steps-content",
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.slect-icon{
		background-color: #C60300 !important;
	}
.content{
	width: 100%;
	height: 110rpx;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	.top-content{
		display: flex;
		margin-bottom: 10rpx;
		justify-content: space-between;
	}
}
.wenzi{
	margin-left: 20rpx;
	margin-right: 20rpx;
	color: #BBBABA;
}
.dian-no{
	width: 22rpx;
	height: 22rpx;
	border-radius: 22rpx;
     background-color: #BBBABA;
}
.dian-line{
	display: flex;
	align-items: center;
}
.dian-content{
	margin-left: 20rpx;
	margin-right: 20rpx;
}
.dian-have{
	width: 32rpx;
	height: 32rpx;
	border-radius: 20rpx;
	padding: 3rpx;
	background-color: #C60300 ;
}
.slect-type{
	color: #C60300;
}
</style>
